<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="center-w">
      <div class="head">
        <div class="title">分销商提现审核管理</div>
        <div class="form">
          <div class="form_item">
            <div>分销商：</div>
            <el-select
              style="width: 200px;"
              size="large"
              v-model="pageparm.agentId"
              placeholder="请选择"
              @change="_getWithDrawList()"
              clearable
            >
              <el-option
                :label="item.label"
                :value="item.id"
                v-for="(item, index) in distributorList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
          <div class="form_item">
            <div>审核状态：</div>
            <el-select
              style="width: 200px;"
              size="large"
              v-model="pageparm.state"
              placeholder="请选择"
              @change="_getWithDrawList()"
              clearable
            >
              <el-option label="待审核" :value="0"></el-option>
              <el-option label="审核通过" :value="1"></el-option>
              <el-option label="审核失败" :value="2"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table size="small" :data="tableData">
          <el-table-column align="center" type="index"> </el-table-column>
          <el-table-column align="center" prop="agentName" label="分销商">
          </el-table-column>
          <el-table-column align="center" prop="orderNo" label="订单号">
          </el-table-column>
          <el-table-column align="center" prop="orderTime" label="订单时间">
          </el-table-column>
          <el-table-column align="center" prop="total" label="申请金额">
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="remark"
            label="审核状态"
          >
            <template slot-scope="scope">
              <div
                :class="{
                  text_green: scope.row.state == 1,
                  text_red: scope.row.state == 2,
                  text_orange: scope.row.state == 0
                }"
              >
                {{ stateText(scope.row.state) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="remark"
            label="审核理由(拒绝)"
          >
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="申请时间">
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            width="200px"
            label="操作"
          >
            <template v-if="scope.row.state == 0" slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="confirmPass(scope.row)"
                >同意</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="rejectHandle(scope.row)"
                >拒绝</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        title="请输入拒绝理由"
        :visible.sync="rejectVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入理由"
            v-model="remark"
          >
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="rejectVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmReject()">确 定</el-button>
        </span>
      </el-dialog>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";

import {
  getWithDrawList,
  CashOutRecordBySubmit,
  getAgentTree
} from "../../api/agent";

export default {
  components: { Pagination },
  data() {
    return {
      // 目前没有做列表处理 后续需要多功能控制在进行优化处理
      tableData: [],
      rejectVisible: false,
      currentId: null,
      remark: "",
      pageparm: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        state: null,
        agentId: null
      },
      distributorList: []
    };
  },

  created() {
    this.getAgentList();
    this._getWithDrawList();
  },
  methods: {
    //获取分销商数据
    async getAgentList() {
      const res = await getAgentTree();
      if (res.code == 200) {
        this.distributorList = JSON.parse(JSON.stringify(res.data));
      } else {
        this.distributorList = [];
      }
    },

    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.pageSize = parm.size;
      this._getWithDrawList();
    },

    stateText(val) {
      switch (val) {
        case 0:
          return "待审核";
        case 1:
          return "审核通过";
        case 2:
          return "拒绝";
        default:
          return "";
      }
    },

    // 审核通过
    confirmPass(s) {
      this.$confirm(`确定通过吗？`, "确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          let data = {
            id: s.id,
            state: 1
          };
          CashOutRecordBySubmit(data).then(res => {
            if (res.data) {
              this.$message.success("操作成功");
              this._getWithDrawList();
            }
          });
        })
        .catch(action => {
          this.$message.info("取消");
        });
    },

    rejectHandle(row) {
      this.currentId = row.id;
      this.remark = "";
      this.rejectVisible = true;
    },

    //拒绝
    confirmReject() {
      if(!this.remark){
        return this.$message.error("请输入原因");
      }
      let data = {
        id: this.currentId,
        state: 2,
        Remark: this.remark
      };
      CashOutRecordBySubmit(data).then(res => {
        if (res.data) {
          this.$message.success("操作成功");
          this.rejectVisible = false;
          this._getWithDrawList();
        }
      });
    },

    //关闭弹框
    handleClose() {
      this.rejectVisible = false;
    },

    // 获取审核列表
    async _getWithDrawList() {
      let res = await getWithDrawList(this.pageparm);
      if (res.data) {
        let { items, totalCount } = res.data;
        this.pageparm.total = totalCount;
        this.tableData = items;
      } else {
        this.tableData = [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.text_orange {
  color: orange;
}
.text_green {
  color: green;
}
.text_red {
  color: red;
}
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 85vh;
  overflow-y: scroll;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 10px;
}
/deep/.el-table .warning-row {
  background: rgb(233, 232, 232) !important;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  .form {
    display: flex;
    align-items: center;
    .form_item {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }
}
</style>
